<template>
	<view class="content" :style="{'padding-top':top+'px','min-height':windowheight+'px'}">
		<Navbar title="点拍" bgColor="#d86784" :backIcon="false" url="/pages/shoot/shoot" style="color: #ffffff;z-index: 1;"></Navbar>
		<view style="width: 100vw;height: 400rpx;">
			<swiper style="height: 400rpx;" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
				:interval="interval" :duration="duration">
				<swiper-item v-for="item in popularplaces" :key="item">
					<image :src="item.shootAddressPhoto" alt="" class="hotpicture" mode="aspectFill"/>
				</swiper-item>
			</swiper>
		</view>
		<view class="searchBox">
			<uni-easyinput class="searchinput" prefixIcon="search" placeholder="请输入拍摄地关键词" placeholderStyle="z-index:0"></uni-easyinput>
			<button size="mini">搜索</button>
		</view>
		<view class="mine">
			<uni-grid :column="2" :showBorder="false" :square="false">
				<uni-grid-item class="uni-grid-item" v-for="(item,index) in popularplaces" :key="item.shootName" @tap="popular(item)">
					<view class="grid-content" :id="item.shootid">
						<img :src="item.shootAddressPhoto" :alt="item.shootName" class="minepicture" :key="item.shootid" :id="item.shootName" mode="aspectFill">
					</view>
					<view class="imgtitle">{{item.shootName}}</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	const baseUrl = getApp().globalData.baseUrl
	const title = ref('Hello')
	const windowheight = ref()
	const platform = ref()
	const statusBar = ref()
	const customBar = ref()
	const top = ref()
	const indicatorDots = ref(true)
	const autoplay = ref(true)
	const interval = ref(2000)
	const duration = ref(500)
	const popularplaces = ref()
	const ownplaces = ref()
	const popular=(item)=>{
		console.log(item)
		uni.navigateTo({
			url:"/pages/shotnum/shotnum?shootPlace="+item.shootAddress
		})
	}
	const getColumnHeight = () => {
		uni.getSystemInfo({
			success(res) {
				console.log(res)
				platform.value = res.platform
				windowheight.value = res.screenHeight
				// #ifdef MP-WEIXIN
				statusBar.value = res.statusBarHeight
				const custom = wx.getMenuButtonBoundingClientRect()
				customBar.value = custom.bottom + custom.top - res.statusBarHeight
				// #endif
				// #ifdef APP-PLUS
				statusBar.value = res.statusBarHeight
				customBar.value = res.statusBarHeight + 45
				// 这里是在安卓手机上加上 3 像素（当时好像是在安卓水滴屏上，系统导航栏高度较低才加上去的，大家可以真机自己调试一下）
				if (res.platform == "android") {
					statusBar.value += 3
					customBar.value += 3
				}
				// #endif
			}
		})
		top.value = customBar.value
		windowheight.value = windowheight.value - top.value
		//console.log(statusBar.value, customBar.value, top.value, windowheight.value)
	}
	onMounted(() => {
		getColumnHeight()
	})
	onShow(() => {
		console.log(getApp().globalData.user)
		const now = new Date().getTime()
		console.log(now)
		if (!uni.getStorageSync('token') || now > uni.getStorageSync('expireTime')) {
			uni.reLaunch({
				url: "/pages/login/login"
			})
		}else{
			getApp().globalData.location = ""
			uni.request({
				url: baseUrl + "/shoot/adress/list",
				method: "POST",
				dataType: "json",
				header: {
					'content-type': 'application/json',
					'Access-Control-Allow-Origin': "*",
				},
				data: {
					shootHot: 1,
				},
				success: function(res) {
					if (res.data.code === 200) {
						popularplaces.value = res.data.value
					}
					console.log(res.data.value)
				}
			})
			console.log(getApp().globalData.user)
		}
	})
</script>
<style lang="less">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: linear-gradient(to bottom, #d95e7d, #ffffff);
	}

	.hotpicture {
		height: 100%;
		width: 100%;
	}

	.searchBox {
		display: flex;
		align-items: center;
		.uni-easyinput__content {
			margin-top: 20rpx;
			width: 500rpx !important;
			height: 70rpx !important;
			border: #d95e7d solid 2rpx !important;
			border-radius: 35rpx !important;
		}
		button{
			margin-left: 40rpx;
			margin-top: 26rpx;
			height: 64rpx;
			line-height: 64rpx;
			border-radius: 35rpx;
			background-color: #d95e7d;
			color: #ffffff;
		}
	}
	.mine {
		width: 100vw;
		margin: 20rpx;
		padding-bottom: 20rpx;
		.grid-content {
			border-radius: 8rpx;
			min-height: 72rpx;
			height: 200rpx;
			width: 96%;
			margin-left: 1.5%;
		}
		.minepicture{
			height: 100%;
			width: 100%;
			border-radius: 8rpx;
		}
		.uni-grid-item--border {
			height: 240rpx;
			border-radius: 8rpx;
		}
		.uni-grid-item{
			background-color: transparent !important;
		}
		.uni-highlight {
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: transparent !important;
		}
		.imgtitle {
			text-align: center;
			font-size: 24rpx;
		}
	}
</style>